import {Component, OnChanges, OnInit} from '@angular/core';
import {Hotspot} from '../../../../share/models/hotspot';
import {Location} from '@angular/common'
import {Router} from "@angular/router";

@Component({
  selector: 'app-group-overview',
  templateUrl: './group-overview.component.html',
  styleUrls: ['./group-overview.component.css']
})
export class GroupOverviewComponent implements OnInit {
  public hunLiu = 45;
  public zhouLiu = 30;
  public guanLiu = 38;
  public chongJi = 26;
  // 判断地图是否全屏
  public isfull: boolean = false;
  // collapsed
  public isCollapsed: boolean = false;


  hotspots: Hotspot[] = [];
  ischecked: boolean = false;
  isfiltered: boolean = false;
  chartTitle1: string;
  chartTitle2: string;
  chartTitle3: string;
  chartTitle4: string;
  chartData1: any;
  chartData2: any;
  chartData3: any;
  chartData4: any;
  colorArray1: string[];
  colorArray2: string[];
  colorArray3: string[];
  colorArray4: string[];

  constructor(private location:Location,
              private router: Router) {
  }
  public collapsed(event:any):void {
    this.isfull = false;
  }

  public expanded(event:any):void {
    this.isfull = true;
  }

  public checkChange(event: boolean) {
    this.ischecked = event;
  }

  public filterTheclick(event: string) {
    console.dir(event)
    this.isfiltered = true;
    console.dir('change')
    if (this.isfiltered === true) {
      this.hotspots = [];
      this.hotspots.push({lng: 108.19, lat: 28.26, title: '乌江公司'})
      this.hotspots.push({lng: 106.18, lat: 27.25, title: '黔源公司'})
      this.hotspots.push({lng: 119.20, lat: 26.27, title: '福建公司'})
      this.hotspots.push({lng: 116.23, lat: 39.56, title: '运营公司'})
      this.hotspots.push({lng: 104.06, lat: 30.67, title: '四川公司'})
      console.dir(this.hotspots);
      this.screenshow();
    }
  }
  screenshow(){
    let screen=document.getElementById('screen');
    screen.style.display = 'block';
  }
  ngOnInit(): void {
    // 生成左半部分图标数据
    this.chartTitle1 = '启停状态'
    this.chartData1 = [
      ['开机 ' + this.hunLiu + '台',   this.hunLiu],
      ['停机 ' + this.zhouLiu + '台',   this.zhouLiu],
    ]
    this.chartTitle2 = '监测状态'
    this.chartData2 = [
      ['正常 ' + this.hunLiu + '台',   this.hunLiu],
      ['预警 ' + this.zhouLiu + '台',   this.zhouLiu],
      ['报警 ' + this.guanLiu + '台',   this.guanLiu],
    ]
    this.chartTitle3 = '机组类型'
    this.chartData3 = [
      ['混流式 ' + this.hunLiu + '台',   this.hunLiu],
      ['轴流式 ' + this.zhouLiu + '台',   this.zhouLiu],
      ['贯流式 ' + this.guanLiu + '台',   this.guanLiu],
      ['冲击式 ' + this.chongJi + '台',   this.chongJi],
    ]
    this.chartTitle4 = '单机容量(MW)'
    this.chartData4 = [
      ['＜10: ' + this.hunLiu + '台',   this.hunLiu],
      ['10-25: ' + this.zhouLiu + '台',   this.zhouLiu],
      ['25-250: ' + this.guanLiu + '台',   this.guanLiu],
      ['＞250: ' + this.chongJi + '台',   this.chongJi],
    ]
    // 饼图颜色
    this.colorArray2 = ['#3ec222', '#fcc81d', '#ed4227'];
    // 注入地图显示点数据
    this.hotspots = [];
    this.hotspots.push({lng: 108.79, lat: 28.75, title: '乌江公司'})
    this.hotspots.push({lng: 105.68, lat: 27.15, title: '黔源公司'})
    this.hotspots.push({lng: 119.30, lat: 26.37, title: '福建公司'})
    this.hotspots.push({lng: 116.23, lat: 39.56, title: '运营公司'})
    this.hotspots.push({lng: 103.06, lat: 30.97, title: '四川公司'})
    this.hotspots.push({lng: 120.19, lat: 28.86, title: '浙江公司'})
    this.hotspots.push({lng: 101.64, lat: 23.56, title: '云南公司'})
    this.hotspots.push({lng: 114.20, lat: 22.90, title: '香港公司'})
    this.hotspots.push({lng: 85.24, lat: 42.16, title: '新疆公司'})
  }


  //弹出框
  close(){
    this.ischecked = false;
  }
  bigger(){
    let oDiv=document.getElementById('floatdiv');
    let oDiv2=document.getElementById('floatdiv2');
    oDiv.style.display='none';
    oDiv2.style.display='block';
  }
  close2(){
    let oDiv2=document.getElementById('floatdiv2');
    oDiv2.style.display='none';
  }
  smaller(){
    let oDiv2=document.getElementById('floatdiv2');
    let oDiv=document.getElementById('floatdiv');
    oDiv2.style.display='none';
    oDiv.style.display='block';
  }
  toNextPage(){
    this.router.navigate(['/pages/condition-monitoring/station-overview/4'])
  }
  public companys: Array<any>= [
    {
      name:'洪家渡',
      "units": [
        {
          index: '1',
          status:  1
        },
        {
          index: '2',
          status:  2
        },
        {
          index: '3',
          status:  1
        }
      ]
    },
    {
      name:'东风',
      "units": [
        {
          index: '1',
          status:  1
        },
        {
          index:'2',
          status:  3
        },
        {
          index: '3',
          status:  1
        },
        {
          index: '4',
          status:  1
        }
      ]
    },
    {
      name:'索风营',
      "units": [
        {
          index: '1',
          status:  2
        },
        {
          index: '2',
          status:  1
        },
        {
          index: '3',
          status:  3
        }
      ]
    },
    {
      name:'乌江渡',
      "units": [
        {
          index: '1',
          status:  2
        },
        {
          index: '2',
          status:  1
        },
        {
          index: '3',
          status:  1
        },
        {
          index: '4',
          status:  1
        },
        {
          index: '5',
          status:  1
        },
        {
          index: '6',
          status:  1
        }
      ]
    },
    {
      name:'构皮滩',
      "units": [
        {
          index: '1',
          status:  1
        },
        {
          index: '2',
          status:  1
        },
        {
          index: '3',
          status:  1
        },
        {
          index: '4',
          status:  1
        },
        {
          index: '5',
          status:  1
        }
      ]
    },
    {
      name:'思林',
      "units": [
        {
          index: '1',
          status:  1
        },
        {
          index: '2',
          status:  2
        },
        {
          index: '3',
          status:  1
        },
        {
          index: '4',
          status:  1
        }
      ]
    },
    {
      name:'沙坨',
      "units": [
        {
          index: '1',
          status:  1
        },
        {
          index: '2',
          status:  1
        },
        {
          index: '3',
          status:  1
        },
        {
          index: '4',
          status:  1
        }
      ]
    },
    {
      name:'大花水',
      "units": [
        {
          index: '1',
          status:  1
        },
        {
          index: '2',
          status:  1
        }
      ]
    },
    {
      name:'格里桥',
      "units": [
        {
          index: '1',
          status:  1
        },
        {
          index: '2',
          status:  1
        }
      ]
    }
  ]
  public goBack(flag?:boolean){
    if(flag){
      this.location.back()
    }
    else {
      this.router.navigate(['/pages/home'])
    }
  }
}
